<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE HTML>
<html>
<head>
<title>添加商品</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/ueditor/addCustomizeButton.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
		$("#addFloor").click(function() {

			if (!hasContent()) {
				alert("内容不能为空");
				return false;
			}
		});
		$("#addFloor").click(function() {
			var id = $("#commid").val();
			var url = "${pageContext.request.contextPath}/CommDetailedController/addDetailed.action";
			var content = getContent();
			var detailedid=$("#detailedid");
			var val;
			if(detailedid!=null){
				val = {
					"content" : content,
					"commid" : id,
					"id":detailedid.val()
				};
			}else{
				val = {
				"content" : content,
				"commid" : id
			};
			}
			
			$.ajax({
				type : "post",
				url : url,
				data : val,
				success : function(data) {
					var result=data.result;
					if(result==0){
					alert("添加失败,请刷新后再试");
					return false;
					}else{
					window.location.href="${pageContext.request.contextPath}/commodity/getComm.action?id="+id
					}
				}
			}
			);
		});
	});
</script>
<style>
#addFloor {
	height: 40px;
}

#a:hover {
	background: #FF0000;
}

body {
	margin: 0px;
	padding: 0px;
}

.defaultImg {
	height: 70px;
	width: 70px;
	border: 1px solid;
	margin-left: 5px;
}

#file {
	margin-left: 80%;
	position: relative;
	display: inline-block;
	background: #fff;
	border: 1px solid #43CD80;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

#file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

#file:hover {
	background: #FFF5EE;
	color: #000;
	text-decoration: none;
}

#addImg {
	display: none;
	position: fixed;
	z-index: 999;
	top: 40%;
	left: 18%;
}
#commdiv div{
float:left;
}

.defaultImgDiv button {
	position: relative;
	z-index: 99;
	top: -57px;
	left: -32px;
	border: none;
	color: red;
	display: none;
}

.defaultImgDiv {
	display: inline;
}

#addFloor {
	margin-left: 90%;
	width: 120px;
	border:
}

#preview {
	width: 80%;
	margin: auto;
	border: 1px solid;
	min-height: 600px;
	display: none;
}

#preview img {
	max-width: 1000px;
	display: block;
	margin: auto;
}
#carousel img{
width:200px;height: 200px;border:1px solid #C2C2C2;
}
#carousel img:hover{
	border-color: #EE6A50;cursor: pointer;
}
#carousel div{
display: inline-block;margin-left:40px;
}
#carousel{
margin:20px 0 20px 170px;
}
</style>
<body>
	<div
		style="width:100%;height:30px;border-bottom: 1px solid #D1D1D1;background: #FF7F00;padding-top:1%">
		<div style="float:left;width:50%">
			<span style="margin-left:40%;color:#fff">您好:${user.name }</span>
		</div>
		<div style="float:left;width:25%">
			<span style="color:#fff">俊宁商城商品图文编辑页</span>
		</div>
		<div style="float:left;width:25%">
			<a style="color:#fff;margin-left: 40%;text-decoration:none" href="#"
				id="a">退出登录</a>
		</div>
	</div>
	<c:if test="${comm!=null }">
		<div id="commdiv" style="height: 150px;width:1120px;border:1px solid #D1D1D1;margin:20px auto">
			<div style="margin:10px 10px;border:1px solid #D1D1D1;">
				<img style="height: 130px;width:130px" src="${pageContext.request.contextPath}/file/img/${comm.titleimg}">
			</div>
			<div style="margin:45px 10px;width:280px;">
				<span style="color:#EE7942">
					${comm.title}
				</span>
			</div>
			<div style="margin:45px 30px;">
				<span style="color:#EE3B3B">
					${comm.price}元
				</span>
			</div>
			<div style="margin:45px 10px;">
				<span style="color:#698B69">
					${comm.categoryid}
				</span>
			</div>
			<div style="margin:45px 30px;">
				<span style="color:#698B69">
					${comm.brand}
				</span>
			</div>
			<div style="width: 250px;margin:20px 0 0 30px;height:120px; overflow:auto" >
				<span style="font-size: 11px;font-weight:550">
					${comm.parameter}
				</span>
			</div>
			<div style="margin:55px 0 0 20px;">
					<span style="color:#FF0000">
					id:${comm.id}
					</span>
			</div>
		</div>
	</c:if>
	<button id="outPreview" class="btn btn-info"
		style="margin-left: 84.5%;display:none">退出预览</button>
	<br>
	<div id="preview">
		<c:if test="${detailed!=null}">
			${detailed.content}
		</c:if>
	</div>
	<div id="carousel">
			<div>
			<c:if test="${comm.img1==null||comm.img1==''}">
		<img id="updateimg1" onclick="return updateimg(1);" src="${pageContext.request.contextPath}/img/cnotimg.png" alt="轮播展示1" title="修改">
			</c:if>
				<c:if test="${comm.img1!=null&&comm.img1!=''}">
		<img id="updateimg1" onclick="return updateimg(1);" src="${pageContext.request.contextPath}/file/detailed/${comm.img1}" alt="轮播展示1" title="修改">
			</c:if>
			</div>
			<div>
			<c:if test="${comm.img2==null||comm.img2==''}">
		<img id="updateimg2" onclick="return updateimg(2);" src="${pageContext.request.contextPath}/img/cnotimg.png" alt="轮播展示2" title="修改">
			</c:if>
				<c:if test="${comm.img2!=null&&comm.img2!=''}">
		<img id="updateimg2" onclick="return updateimg(2);" src="${pageContext.request.contextPath}/file/detailed/${comm.img2}" alt="轮播展示2" title="修改">
			</c:if>
			</div>
			<div>
			<c:if test="${comm.img3==null||comm.img3==''}">
		<img id="updateimg3" onclick="return updateimg(3);" src="${pageContext.request.contextPath}/img/cnotimg.png" alt="轮播展示3" title="修改">
			</c:if>
				<c:if test="${comm.img3!=null&&comm.img3!=''}">
		<img id="updateimg3" onclick="return updateimg(3);" src="${pageContext.request.contextPath}/file/detailed/${comm.img3}" alt="轮播展示3" title="修改">
			</c:if>
			</div>
			<div>
			<c:if test="${comm.img4==null||comm.img4==''}">
		<img id="updateimg4" onclick="return updateimg(4);" src="${pageContext.request.contextPath}/img/cnotimg.png" alt="轮播展示4" title="修改">
			</c:if>
				<c:if test="${comm.img4!=null&&comm.img4!=''}">
		<img id="updateimg4" onclick="return updateimg(4);" src="${pageContext.request.contextPath}/file/detailed/${comm.img4}" alt="轮播展示4" title="修改">
			</c:if>
			</div>
			<span id="loading" style="display:none;"class="fa fa-circle-o-notch fa-spin fa-2x">
			</span>
	</div>
	<div id="maindiv">
		<h3 style="margin:20px 0 30px 620px;">商品图文详细</h3>
		<div>
			<div style="margin:auto;width:1200px;height:768px" id="text">
				<script id="editor" type="text/plain"></script>
				<span id="titleError" style="red"></span>
				<button id="addFloor">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</button>
			</div>
			<div id="addImg">
				<div
					style="width:500px;height:200px;
			border:1px solid;background: #fff;margin-left:210px;padd">
					<button class="close" id="closImg" style="margin-left:93%">&times;</button>
					<div class="defaultImgDiv">
						<img id="img0" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg"
							style="margin-left:20px">
						<button class="close" id="closImg0">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img1" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg1">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img2" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg2">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img3" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg3">&times;</button>
					</div>
					<br>
					<span id="file"> 添加图片 <input type="file" multiple
						id="upload" />
					</span> <span id="imgspan"
						style="color:red;margin-left: 58%;display: block;margin-top:3%">您最多一次可以添加4张图片</span>
					<button id="submitImg"
						style="margin-left: 80%;height:20%;display:none;border: 1px solid #43CD80;">确认插入</button>
				</div>
			</div>
		</div>
		<input type="hidden" value="${pageContext.request.contextPath}/" id="path">
	</div>
	<c:if test="${detailed!=null }">
		<input type="hidden" value="${detailed.id }" id="detailedid">
	</c:if>
		<input type="hidden" value="${comm.id }" id="commid">
		<div style="display:none">
		 <input onchange="return uploadimg(1,this,${comm.id })" type="file" id="updateimgC1" >
		<input onchange="return uploadimg(2,this,${comm.id })" type="file" id="updateimgC2" >
		<input onchange="return uploadimg(3,this,${comm.id })" type="file" id="updateimgC3" >
		<input onchange="return uploadimg(4,this,${comm.id })" type="file" id="updateimgC4" >
		</div>
<script type="text/javascript">
		function updateimg(num){
			$("#updateimgC"+num).click();
		}
		function uploadimg(num,data,commid){
			var file = $(data).val();
			if (!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
				alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
				return false;
			}
			$("#loading").css("display","inline-block");
			/* 创建表单对象 */
			var formData = new FormData();
				/* 添加文件 */
			formData.append("img", $(data)[0].files[0]);
			formData.append("commid",commid);
			formData.append("num",num);
			$.ajax({
				url :"${pageContext.request.contextPath}/commodity/uploadImg.action",
				type : 'POST',
				data : formData,
				processData : false,
				contentType : false,
				dataType : "json",
				success : function(r) {
						if(r.img==null||r.img==""){
						alert("修改失败");
						$("#loading").css("display","none");
						return false;
						}
						$("#updateimg"+num).attr("src","/mall/file/detailed/"+r.img);	
						$("#loading").css("display","none");
				},
				error : function(responseStr) { 
					alert("上传失败,请重新上传!");
					$("#loading").css("display","none");
					} 
					
				});
		}
		var ue = UE.getEditor('editor', {
			initialFrameHeight : 768,
			initialFrameWidth : 1200,
			toolbars : [
				[ 'source','undo', 'redo',
					'bold', 'selectall', 'italic', 'underline', 'fontfamily', 'fontsize',
					'emotion', 'forecolor', 'inserttable' ]
			]
		});
		function insertHtml(e) {
			UE.getEditor('editor').execCommand('insertHtml', e);
		}
		function getAllHtml() {
			alert(UE.getEditor('editor').getAllHtml());
		}
		/*获取输入的内容包含标签  */
		function getContent() {
			return UE.getEditor('editor').getContent();
	
		}
		/*是否有内容  */
		function hasContent() {
			return UE.getEditor('editor').hasContents();
		}
	</script>
</body>

</html>